<template>
    <div class="foucus">
       <v-header title="关注"></v-header>
       <div :style="{height: swiperHeight}">
          <scroll ref="scroll" style="overflow: hidden; height: 100%"
            :data="focusList"
            :pullDownRefresh="true"
            :pullUpLoad="true"
            @pullingDown="onPullingDown"
            @pullingUp="onPullingUp">
              <div>
                  <div v-for="item in focusList" :key="item.id" @click="handleClickFocusDesc(item.following)" class="bottomLineWrapper">
                        <div class="centerbody">
                            <cell-box class="cell-wrapper">
                                <div style="display: flex;">
                                    <img :src="item.followingHeadUrl" alt="" class="headerimage">
                                    <div :style="{width: cellContentWith+'px'}" style="padding: 0 7px;">
                                        <div>{{item.followingNickname}}</div>
                                        <div class="signature"> {{item.followingSignature}}</div>
                                    </div>
                                </div>
                                <div class="focusbutton" @click.stop="handleClickFocus(item.following)">
                                    <button>
                                        <span>已关注</span>
                                    </button>
                                </div>
                            </cell-box>
                        </div>
                  </div>
                  <not-data v-if="focusList.length === 0" tip="空空如也~<br>点击刷新" @handleClick="getFocusList()"></not-data>
             </div>
          </scroll>
        </div>
    </div>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import imageTop from '@/assets/img/default_avatar.png'
import Scroll from '@/components/scroll/scroll'
import notData from '@/components/not-data/not-data'
import { Cell, CellBox, XInput, Group, Calendar, XTextarea, XButton } from 'vux'
import axios from '@/api/axiosApi'
import { QINIU_PREFIX } from '@/api/config'
export default {
  data () {
    return {
      imageTop: imageTop,
      swiperHeight: '500px',
      focusList: [],
      foucusShow: true
    }
  },
  methods: {
    handleClickFocusDesc (following) {
      this.$router.push('/user/archives/' + following)
    },
    handleClickFocus (following) {
      const _this = this // 需要注意 onCancel 和 onConfirm 的 this 指向
      this.$vux.confirm.show({
        title: '温馨提示',
        content: '你确定取消关注吗',
        // 组件除show外的属性
        onCancel () {},
        onConfirm () {
          axios.post(_this, '/v1/follow/' + _this.$route.params.userId + '/' + following + '/0', null, (data) => {
            _this.$vux.toast.text('取消关注成功', 'middle')
            _this.getFocusList()
          })
        }
      })
    },
    // 获取关注列表
    getFocusList () {
      axios.get(this, '/v1/follows', {follower: this.$route.params.userId, valid: 1, pageNum: this.pageNum, pageSize: this.pageSize}, (data) => {
        data.forEach(item => {
          if (item.followingHeadUrl) {
            if (item.followingHeadUrl.indexOf(QINIU_PREFIX) > -1) {
              item.followingHeadUrl += '-bheader'
            }
          } else {
            item.followingHeadUrl = imageTop
          }
        })
        if (data.length === 0) {
          if (this.pageNum === 1) {
            this.$refs.scroll.hiddenPullDown()
          } else {
            this.pageNum--
            this.$refs.scroll.hiddenPullUpLoad()
          }
        } else {
          if (this.pageNum > 1) {
            this.focusList = this.focusList.concat(data)
          } else {
            this.focusList = data
          }
        }
      })
    },
    onPullingUp () {
      this.pageNum++
      this.getFocusList()
    },
    onPullingDown () {
      this.pageNum = 1
      this.getFocusList()
    }
  },
  created () {
    this.pageNum = 1
    this.pageSize = 10
    this.cellContentWith = window.innerWidth - 55 - 95
    this.getFocusList()
  },
  mounted () {
    this.swiperHeight = window.innerHeight - 64 + 'px'
  },
  components: {
    VHeader,
    Cell,
    CellBox,
    imageTop,
    XInput,
    Calendar,
    XTextarea,
    XButton,
    Group,
    Scroll,
    notData
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'
.foucus {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: $color-background;
  z-index: 101;
  height:100%;
}

.headerimage {
    width:40px;
    height:40px;
}
.centerbody {
    background-color:white
}

.signature {
    font-size: 12px;
    color:#C9C9CE;
    white-space: nowrap;
    overflow: hidden;
    text-overflow:ellipsis;
}

.cell-wrapper {
  display flex
  justify-content: space-between;
}


.hrline {
    height:1px;border:none;border-top:1px solid #E8E8E8;
    margin-left:3%;
}

.focusbutton button {
  color: $color-text-2;
  width: 55px;
  height: 27px;
  border: solid 1px #E0E0E0;
  border-radius 3px
  background-color: #fff;
  &:focus {
    outline: none
  }
}

.focusbutton button span {
   color: #b4afaf
}

.jiafocusbutton button {
  border 1px solid #E55252
  border-radius 2px
  padding 4px 12px
  background none
  width 70px
}

.jiafocusbutton button span {
   color: #E55252
}

.bottomLineWrapper {
  border-bottom-style solid
  border-width:1px
  border-color: #E4E4E4
  .cell-wrapper {
    img {
      border-radius 50%
    }
  }
}
</style>
